<template>
	<view class='comment-container' v-if='visibleSync' :class='visibleSync?"comment-visible":""' :style="{height: setting.windowHeight + 'px'}" @click.stop="touchPopup">
		<view class='comment-box' :animation='slideUpAnimation' @click.stop="touchComment">
			<view class='comment-title'>
				<view class='comment-label'>全部评论({{commentList.length}})</view>
				<view class='icon-close' @click.stop="hide"><image src='/static/image/ico-close-black.png' mode='widthFix' class='i3'/></view>
			</view>
			<view class='comment-wrapepr'>
				<scroll-view :scroll-y='true' :scroll-x='false' :style='{height: popBoxHeight + "px"}'>
					<view class='comment-detail' v-for="(comment, commentIndex) in commentList" :key="commentIndex">
						<view class='comment-head'>
							<view class='head-left'>
								<view class='head-img'>
									<image :src='comment.head' mode='widthFix' class='i2'></image>
								</view>
								<text class='comment-name'>{{comment.user}}</text>
							</view>
							<view class='head-right'>
								<image src='/static/image/ico-heart-blue.png' mode='widthFix' class='i3' v-if='comment.thumbflag'></image>
								<image src='/static/image/ico-heart-gray.png' mode='widthFix' class='i3' v-if='!comment.thumbflag'></image>
								<text class='heart-text' v-if='comment.thumbup==0' :class='comment.thumbflag?"cor-b":""'>赞</text>
								<text class='heart-text' v-if='comment.thumbup>0' :class='comment.thumbflag?"cor-b":""'>({{comment.thumbup}})</text>
							</view>
						</view>
						<text class='comment-content'>{{comment.comment}}</text>
						<view class='comment-reslist' v-if='comment.resList!=null && comment.resList.length>0'>
							<view class='comment-resblock'>
								<view class='comment-res' v-for="(res, resIndex) in comment.resList" :key="resIndex">
									<text class='comment-user' :decode='true'>{{res.resuser}} </text>回复<text :decode='true' class='comment-user'>{{res.resuser}}: </text>
									<text class='res-content'>{{res.comment}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class='comment-space'></view>
			<view class='comment-btnbar'>
				<view class='comment-btnbar-wrapper'>
					<view class='comment-btn' @click.stop="showFullInput">
						<image src='/static/image/ico-emoji.png' mode='widthFix' class='i2'></image>
					</view>
					<view class='comment-input'>
						<input class='comment-text' placeholder="说点什么" placeholder-class="comment-hint" disabled="disabled" @click.stop="showInput"/>
					</view>
				</view>
			</view>
		</view>
	</view>
	<csinput ref='csinput' @method='commitComment'></csinput>
</template>

<script>
	import gui from '@/lib/gui.js';
	import effective from '@/lib/effective.js';
	import csinput from '@/components/popup/input/csinput.vue';
	
	export default {
		components:{
			csinput
		},
		data() {
			return {
				setting: {},
				visibleSync: false,
				slideUpAnimation: null,
				commentList: [
					{head: '/static/image/ico-emoji.png', user: '阿萨大风格1', comment: '阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格阿萨大风格', thumbup: 2, thumbflag:true},
					{head: '/static/image/ico-emoji.png', user: '阿萨大风格2', comment: '阿萨大风格阿萨大风格', thumbup: 2, thumbflag:false, 
						resList: [
							{user: '阿萨大风格3', resuser: 'shen hong peter', comment: '阿萨大风格啊大苏打'},
							{user: '阿萨大风格4', resuser: '阿萨大风格1', comment: '阿萨大风格啊大苏打阿萨大风格啊大苏打'},
							{user: '阿萨大风格5', resuser: 'Peter1983', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS'},
						]},
					{head: '/static/image/ico-keyboard.png', user: '阿萨大风格6', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS', thumbup: 2, thumbflag:true},
					{head: '/static/image/ico-emoji.png', user: '阿萨大风格7', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS', thumbup: 2, thumbflag:false},
					{head: '/static/image/ico-emoji.png', user: '阿萨大风格8', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS', thumbup: 2, thumbflag:true},
					{head: '/static/image/ico-keyboard.png', user: 'shen hong peter', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS', thumbup: 2, thumbflag:false},
					{head: '/static/image/ico-emoji.png', user: '阿萨大风格9', comment: '阿萨大风格啊大苏打sdahjfdh4sfgsg的VS', thumbup: 2, thumbflag:false}
				],
			}
		},
		mounted(){
			var that = this;
			gui.init(this);
		},
		methods: {
			hide(){
				this.$refs['csinput'].hide();
				this.visibleSync=false;
			},
			
			show(){
				this.popBoxHeight=this.setting.windowHeight * 2 / 3;
				this.visibleSync=true;
				effective.slideUp(this, 'slideUpAnimation', this.popBoxHeight);
			},
			
			showFullInput(){
				this.$refs['csinput'].show(true);
			},
			
			showInput(){
				this.$refs['csinput'].show(false);
			},
			
			touchComment(){
				this.$refs['csinput'].hide();
			},
			
			touchPopup(){
				this.$refs['csinput'].hide();
				this.hide();
			},
			
			commitComment(val){
				console.log(val);
			},
		}
	}
</script>

<style>
	.comment-container{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 100vh;
		position:fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,0.5);
		z-index: 99999;
	}
	
	.comment-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-color: #fff;
	}
	
	.comment-title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: calc( 100% - 20px );
		padding-left: 10px;
		height: 40px;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.comment-label{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 50%;
		font-size: 16px;
		font-weight: bold;
	}
	
	.icon-close{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding: 0px 10px;
	}
	
	.comment-wrapepr{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 94%;
	}
	
	.comment-detail{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.comment-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px 0px;
	}
	
	.head-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 70%;
	}
	
	.head-img{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.comment-name{
		color: #000;
		font-size: 12px;
		font-weight: bold;
		padding-left: 4px;
	}
	
	.head-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 30%;
	}
	
	.heart-text{
		margin-left: 4px;
		font-size: 12px;
	}
	
	.comment-content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 12px;
		color: #666;
		line-height: 24px;
	}
	
	.comment-reslist{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}
	
	.comment-resblock{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width: 90%;
		background-color: #f1f1f1;
		padding: 5px 10px;
		border-radius: 5px;
	}
	
	.comment-res{
		padding: 6px 0px;
		font-size: 12px;
		flex-wrap: wrap;
		word-break: break-all;
	}
	
	.comment-user{
		font-weight: bold;
		padding: 0px 6px;
	}
	
	.res-content{
		font-size: 12px;
		color: #666;
	}
	
	.comment-space{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: #fff;
		height: 10px;
	}
	
	.comment-btnbar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.comment-btnbar-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 50px;
		background-color: #fff;
		box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1); 
	}
	
	.comment-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 15%;
	}
	
	.comment-input{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: calc( 85% - 15px );
		padding-right: 15px;
	}
	
	.comment-text{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: calc( 100% - 30px );
		background-color: #f1f1f1;
		height: 32px;
		padding: 0px 15px;
		border-radius: 16px;
		font-size: 14px;
	}
	
	.comment-hint{
		color: #999;
	}
</style>
